<template>
  <t-modal
    title="新增版本"
    width="900px"
    :visible="visible"
    @ok="onSubmit()"
    @cancel="closeModal()"
    wrapClassName="adjust-modal-container"
    forceRender
    v-bind:confirmLoading="confirmLoading"
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="版本名称" prop="name">
          <a-input placeholder="请输入" v-model="form.name" />
        </a-form-model-item>
        <!-- <a-form-model-item label="版本编码" prop="code">
          <a-input placeholder="请输入" v-model="form.code" />
        </a-form-model-item> -->
        <a-form-model-item label="版本描述" prop="remark">
          <a-input
            placeholder="请输入"
            type="textarea"
            :rows="4"
            v-model="form.remark"
          />
        </a-form-model-item>
        <div class="tip">
          注：如果需要导入文件调整版本，请先导出计划文件！新增版本，耗时较长，请耐心等待，请勿刷新页面！
        </div>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { createVersion, createChildVersion } from "@/api/progressManage";
export default {
  inject: ["moduleSource", "versionSource", "firstIndex", "conditionsSource"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        //版本名称
        name: "",
        //版本编码
        code: "",
        //变更描述
        remark: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入版本名称",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入版本编码",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入变更描述",
          },
        ],
      },
      confirmLoading: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    createVersion,
    createChildVersion,
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { form } = this;
          let { orgCode = "", tenantCode } = this.conditionsSource();
          let { uuid } = this.versionSource();
          let formJson = {
            proCode: tenantCode,
            orgCode: "",
            versionId: uuid,
            //版本名称
            name: form.name,
            //版本编码
            code: form.code,
            //变更描述
            remark: form.remark,
            //类型
            type: this.moduleSource(),
          };
          this.confirmLoading = true;
          let url = "";
          if (this.moduleSource() == "scheduleType.01") {
            url = "createVersion";
          } else {
            url = "createChildVersion";
          }
          this[url](formJson)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.resetForm();
                this.$emit("ok", res?.data ?? {});
                this.$emit("update:visible", false);
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch(() => {})
            .finally((_) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    //重置表单
    resetForm() {
      this.form = {
        //版本名称
        name: "",
        //版本编码
        code: "",
        //变更描述
        remark: "",
      };
      this.$refs.ruleForm.resetFields();
    },
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("close");
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.adjust-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 20px 40px 20px 10px;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 120px;
        label {
          color: #999999;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }

    .sub-title {
      padding-left: 43px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #525a5d;
      position: relative;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::after {
        content: "";
        width: 3px;
        height: 16px;
        background: #3759a0;
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
      }
      .ant-btn {
        margin-right: 0;
      }
    }
    .tip {
      color: #89898b;
      padding-left: 120px;
    }
  }
}
</style>
